import React from 'react';
import logo from './logo.svg';
import '../App.css';
import {
    Bubble,
    Sender,
    useXAgent,
    useXChat
} from '@ant-design/x';
import OpenAI from 'openai';
import { Typography, Flex, Button, Space, theme  } from 'antd';
import markdownit from 'markdown-it';
import { UserOutlined, SyncOutlined, CopyOutlined } from '@ant-design/icons';

const apikey = 'sk-68ac5f5ccf3540ba834deeeaecb48987'
const BASE_URL = 'https://dashscope.aliyuncs.com/compatible-mode/v1'
// const BASE_URL = '/aliyuncs/compatible-mode/v1'
const model_name = 'qwen-plus'

const client = new OpenAI({
    baseURL: BASE_URL,
    apiKey: apikey,
    dangerouslyAllowBrowser: true,
});

const md = markdownit({ html: true, breaks: true });

function Demo() {
    const fooAvatar = {
        color: '#f56a00',
        backgroundColor: '#fde3cf',
      };
      const barAvatar = {
        color: '#fff',
        backgroundColor: '#87d068',
      };
    const hideAvatar: any = {
        visibility: 'hidden',
      };

    return (
        <div className="App">
            <Flex gap="middle" vertical>
    <Bubble
      placement="start"
      content="Good morning, how are you?"
      avatar={{
        icon: <UserOutlined />,
        style: fooAvatar,
      }}
      header="Ant Design X"
      footer={
        <Space>
          <Button color="default" variant="text" size="small" icon={<SyncOutlined />} />
          <Button color="default" variant="text" size="small" icon={<CopyOutlined />} />
        </Space>
      }
    />
    <Bubble
      placement="start"
      content="What a beautiful day!"
      styles={{
        avatar: hideAvatar,
      }}
      avatar={{}}
    />
    <Bubble
      placement="end"
      content="Hi, good morning, I'm fine!"
      avatar={{
        icon: <UserOutlined />,
        style: barAvatar,
      }}
    />
    <Bubble
      placement="end"
      content="Thank you!"
      styles={{
        avatar: hideAvatar,
      }}
      avatar={{}}
    />
  </Flex>
        </div>
    );
}

export default Demo;
